/**
 * Example Dolphin View
 * @constructor
 */
MY.example.DolphinPanelView = function DolphinPanelView(m, p) {
    var that = this;
    this.x = function () {
        $("#dolphinPanel").livequery(function () {
            $(this).load("structure/my.example.dolphin-panel.html", loaded);
            
            EK.debug("dolphin load");
        });
    };

    this.unload = function () {
        unbind();

        EK.purge($("#dolphinPanel")[0]);
        $("#dolphinPanel")[0].innerHTML = "";

        EK.debug("dolphin unload");
    };

    function loaded(data) {
        sync(); // sync before wire so change events don't fire
        bind();
        wire();
    }
    
    function sync(prop) {
        if (prop) {
            EK.debug(EK.functionName(m.constructor) + "." + prop + 
                " changed to " + m[prop]);
        } 
        $("#dolphinName").text(m.firstName);
    }
    
    function wire() {
        $("#dolphinNewName")
            .change(function () {
                p.nameChanged($("#dolphinNewName").val());	
            })
            .keypress(function (e) {
                if (e.which == 13) { // enter key
                    $(this).change();
                    return false;
                }
            });
    }
    
    function bind() {
        m.bind("change", sync);        
    }
    
    function unbind() {
        m.unbind("change", sync);        
    }
};